<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Application Layout Demo</title>

	<link rel="stylesheet" type="text/css" href="css/app.css" />

	<!-- REQUIRED scripts for layout widget -->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.layout.js"></script>

	<!-- OPTIONAL ui.draggable is required to resize panes -->
	<script type="text/javascript" src="js/ui.core.js"></script>
	<script type="text/javascript" src="js/ui.draggable.js"></script>

	<!-- OPTIONAL animation effects for opening/closing panes -->
	<script type="text/javascript" src="js/effects.core.js"></script>
	<script type="text/javascript" src="js/effects.slide.js"></script>
	<script type="text/javascript" src="js/effects.drop.js"></script>
	<script type="text/javascript" src="js/effects.scale.js"></script>

	<!-- CUSTOM VERSION OF ui.accordion.js - HAS A 'resize' METHOD -->
	<script type="text/javascript" src="js/ui.accordion.resizable.js"></script>
	<!-- easing library is used by Accordion widget -->
	<script type="text/javascript" src="js/jquery.easing.js"></script>
	<script type="text/javascript" src="js/jquery.easing.compatibility.js"></script>


	<script type="text/javascript">

	var myLayout, myAccordion;

	$(document).ready(function () {

		myLayout = $('body').layout({
		//	DEFAULTS
			closable:				false
		,	resizable:				false
		,	spacing_open:			6
		,	spacing_closed:			6
		,	resizerDragOpacity:		0.6
		//	Banner
		,	north__spacing_open:	0
		//	Statusbar
		,	south__spacing_open:	0
		//	Menu
		,	west__closable:			true
		,	west__resizable:		true
		//	Sub-Form IFRAME
		,	center__paneSelector:	"#subform"
		});

		// ACCORDION - inside the West pane
		myAccordion = $("#MainMenu").accordion({
			selectedClass: 	"active"
		,	navigation:		true
		,	fillSpace:		true
		,	animated: 		"bounceslide"
		});

	});

	</script>

	<style type="text/css">
	/*
	 *	Rules below are for simulated drop-down/pop-up lists
	 */
	
	ul {
		/* rules common to BOTH inner and outer UL */
		z-index:	100000;
		margin:		1ex 0;
		padding:	0;
		list-style:	none;
		cursor:		pointer;
		border:		1px solid Black;
		/* rules for outer UL only */
		width:		15ex;
		position:	relative;
	}
	ul li {
		background-color: #EEE;
		padding: 0.15em 1em 0.3em 5px;
	}
	ul ul {
		display:	none;
		position:	absolute;
		width:		100%;
		left:		-1px;
		/* Pop-Up */
		bottom:		0;
		margin:		0;
		margin-bottom: 1.55em;
	}
	.ui-layout-north ul ul {
		/* Drop-Down */
		bottom:		auto;
		margin:		0;
		margin-top:	1.45em;
	}
	ul ul li		{ padding: 3px 1em 3px 5px; }
	ul ul li:hover	{ background-color: #FF9; }
	ul li:hover ul	{ display:	block; background-color: #EEE; }
	
	</style>

</head>
<body id="app-shell">

<div class="ui-layout-north">
	Banner
</div>

<iframe id="subform" name="subform" width="100%" height="600" frameborder="0" scrolling="yes"
	src="app_toolbar.html"></iframe>

<div class="ui-layout-south">
	Footer
</div>

<div class="ui-layout-west" style="display: none;">
	<div id="MainMenu" class="basic">
		<a>Section 1</a>
		<div>
			<p>
				You've seen it coming!<br />
				Buy now and get nothing for free!<br />
				Well, at least no free beer. Perhaps a bear,<br />
				if you can afford it.
			</p>
		</div>
		<a>Section 2</a>
		<div>
			<p>
				your bear, you have to admit it!<br />
				No, we aren't selling bears.
			</p>
		</div>
		<a>Section 3</a>
		<div class="scrolling">
			<p>
				get two for three beer.
			</p>
			<p>
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
			</p>
			<p>
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
			</p>
			<p>
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
			</p>
			<p>
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
			</p>
			<p>
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
				And now for something completely different.<br />
			</p>
		</div>
	</div>
</div>

</body>
</html>